How do you make an HTTP call in AngularJS?

Question

ICSM · Answer

In AngularJS (1.x), HTTP calls are made using the built-in 
$http service. It returns a 
promise and supports all standard HTTP methods.
Short answer (interview-friendly)
In AngularJS, HTTP calls are made using the $http service, which returns a promise and supports methods like
GET, POST, PUT, and DELETE.
and 
1. Basic $http GET request
app.controller('MyCtrl', function ($scope, $http) {
    $http.get('/api/users')
        .then(function (response) {
            // success
            $scope.users = response.data;
        })
        .catch(function (error) {
            // error
            console.error(error);
        });
});
2. POST request
$http.post('/api/users', {
    name: 'John',
    email: 'john@test.com'
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.error(error);
});
3. Full $http configuration object (recommended in real projects)
$http({
    method: 'PUT',
    url: '/api/users/1',
    data: {
        name: 'Updated Name'
    },
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.error(error);
});
4. Using $http in a service / factory (best practice)
app.factory('UserService', function ($http) {
    return {
        getUsers: function () {
            return $http.get('/api/users');
        },
        addUser: function (user) {
            return $http.post('/api/users', user);
        }
    };
});
Controller usage:
app.controller('MyCtrl', function ($scope, UserService) {
    UserService.getUsers()
        .then(function (res) {
            $scope.users = res.data;
        });
});
5. Handling response structure
AngularJS $http response object contains:
response.data     // actual response body
response.status   // HTTP status code
response.headers  // response headers
response.config   // request config
6. Older .success() / .error() (deprecated)
$http.get('/api/users')
    .success(function (data) {
        console.log(data);
    })
    .error(function (err) {
        console.error(err);
    });
Not recommended anymore—use .then() instead.
7. Common interview notes (important)
$http returns a promiseInternally uses 
XHR / FetchSupports interceptorsCan be wrapped in services for reuse$httpBackend is used for unit testing
and

interview

How do you make an HTTP call in AngularJS?

ICSM

Can you answer this question?

1 Answers

Short answer (interview-friendly)

1. Basic `$http` GET request

2. POST request

3. Full `$http` configuration object (recommended in real projects)

4. Using `$http` in a service / factory (best practice)

5. Handling response structure

6. Older `.success()` / `.error()` (deprecated)

7. Common interview notes (important)

Liked By